<template>
    <div>
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="顶级比例" prop="toplevelproportion">
                    <el-input v-model="formData.toplevelproportion"  type="number" maxlength="2" style="width: 352px"></el-input>
                </el-form-item>
                <el-form-item label="上级比例" prop="superiorproportion">
                    <el-input v-model="formData.superiorproportion" type="number"  maxlength="2" style="width: 352px"></el-input>
                </el-form-item>
            </el-form>
  <span slot="footer" class="dialog-footer" style="margin-left: 29px;">
    <el-button type="primary" :loading="formSumbitLoding" @click="formSumbit" style="">提交</el-button>
  </span>

    </div>
</template>

<script>

import {getList,updateSysDistribution} from "../../api/distribution/distribution";

    const formJson = {
        platformproportion:"",
        toplevelproportion:"",
        superiorproportion:""
    };
    export default {
        name: "distribution",
        data(){

            let validateNromalPercentAge = (rule, value, callback) => {
                if (!/^(?:0|[1-9][0-9]?|100)$/.test(value) ||
                    value == null ||
                    value == ""
                ) {
                    callback(new Error("请输入100以内的正整数"));
                } else {
                    callback();
                }
            };


            return {

                formSumbitLoding: false,//表单提交加载

                formData:formJson,
                    rules: {//表单校验

                        platformproportion: {
                        required: true,
                           // message: "请输入平台比例",
                            validator: validateNromalPercentAge,
                            trigger: "blur"
                    },
                        toplevelproportion: {
                        required: true,
                           // message: "请输入顶级比例",
                            validator: validateNromalPercentAge,
                            trigger: "blur"
                    },
                        superiorproportion: {
                        required: true,
                            //message: "请输入上级比例",
                            validator: validateNromalPercentAge,
                            trigger: "blur"
                    }

                }
            }
        },
        methods :{

            //展示
            /*获取列表事件*/
            getList() {
                this.loading = true;
                getList().then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }

                    let list = response.data || [];
                    if(list.length>0) {
                        for(var i=0;i< list.length;i++){
                            this.formData= list[i];
                        }
                    }else{
                        this.$message.error(response.message);
                        return false;
                    }
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.formData = formJson;
                })
            },
            formSumbit() {
                //表单校验通过
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        this.formSumbitLoding = true;
                        var params = new URLSearchParams(this.formData);
                        updateSysDistribution(params).then(response => {
                            this.formLoading = false;
                            if (response.code != 0) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            this.formSumbitLoding = false;
                            // 清空表单
                            this.$refs["ruleForm"].resetFields();
                            //重新加载表格
                            this.getList();
                        });
                    }
                });
            }
        },
        created() {
            this.getList();
        }

    }
</script>

<style scoped>

</style>


